<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page import="com.pojo.FindBook" %>
<%@ page import="java.util.List" %><%--
  Created by IntelliJ IDEA.
  User: macbookpro
  Date: 2023/11/28
  Time: 15:40
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>豆瓣详情</title>
    <link rel="stylesheet" href="/css/Dou.css">
    <link rel="stylesheet" href="/css/xiangqing.css">
    <link rel="stylesheet" href="/css/bootstrap.css">
    <link rel="stylesheet" href="/css/page.css">
    <link rel="shortcut icon" href="https://static.arkread.com/ark/pics/favicon/favicon.ba37640e.ico" type="image/x-icon"/>
    <link rel="mask-icon" href="https://static.arkread.com/ark/pics/favicon/safari-mask-icon.714e3ee0.svg" color="#5795aa"/>
    <style>
        body {
            background: #f8f9f9;
            color: #333;
        }
        #mar {
            margin-bottom: 0;
        }
        #top {
            margin-top: 10px;
            margin-bottom: 0;
        }
        a:link, a:visited {
            text-decoration: none;
        }
        #hover:hover{
            background-color: #389eac;
            color: #fff;
        }
        #hover1:hover{
            background-color: #389eac;
            color: #fff;
        }
        #header-compact-v3 .nav-user{
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 40px;
            height: 50px;
            margin-right: -20px;
        }
        #header-compact-v3 .header-inner a:not([class^=btn]){
            color:#333;
        }
        #header-compact-v3 .nav-user .avatar{
            overflow: hidden;
            width: 30px;
            height: 30px;
            border-radius: 30px;
        }
        .header-inner a{
            cursor: pointer;
        }
        .avatar{
            position: relative;
        }
        a.avatar::after{
            position:absolute;
            top:0;
            right:0;
            bottom: 0;
            left:0;
            border-radius: 100px;
            background: #000;
            content: '';
            opacity: 0;
            transition: opacity .1s ease-in;
        }
        #header-compact-v3 .nav-user .avatar img{
            width: 100%;
            vertical-align: top;
            object-fit: cover;
        }
        .avatar img{
            display: block;
            width: 100%;
            border-radius: 100px;
        }
        img{
            border: none;
            vertical-align: middle;
            -ms-interpolation-mode: bicubic;
        }
        #header-compact-v3 .more-active:hover .drop-down-list{
            display: block;
        }
        #header-compact-v3 .nav-user .drop-down-list{
            top:50px;
        }
        .drop-down-list{
            position:absolute;
            right: 0;
            z-index: 200;
            padding: 10px 0;
            min-width: 120px;
            max-width: 130px;
            background: #fff;
            box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1);
            text-align: left;
            display: none;
        }
        .drop-down-list::before{
            position: absolute;
            margin-top: -22px;
            width: 100%;
            height: 12px;
            content: '';
        }
        #header-compact-v3 .more-active .drop-down-list a{
            color: #333;
        }
        .header-inner{
            cursor: pointer;
        }
        .drop-down-list a{
            position: relative;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 9px;
            white-space: nowrap;
            line-height: 25px;
        }
        .drop-down-list a:hover {
            background-color: #abcdef;
        }
        .action-menu {
            display: flex;
            flex-flow: column nowrap;
            background: #fff;
            box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
        }

        .action-menu button {
            padding: 0 10px;
            min-width: 66px;
            height: 30px;
            border: none;
            background: #fff;
            color: #333;
            font-size: 12px;
            line-height: 1.5;
        }

        button {
            cursor: pointer;
            -webkit-appearance: button;
            outline: none;
            resize: none;
            align-items: flex-start;
            text-align: center;
            box-sizing: border-box;
            letter-spacing: normal;
            word-spacing: normal;
            text-transform: none;
            text-indent: 0;
            text-shadow: none;
            display: inline-block;
            writing-mode: horizontal-tb;
        }

        .action-menu button:hover {
            background: #eff2f3;
        }

        .rc-trigger {
            display: none;
            position: absolute;
            left: 1076px;
            margin-top: 35px;
        }

        .inner1:hover .rc-trigger {
            display: block;
        }
    </style>
</head>
<%
    FindBook book = (FindBook)request.getAttribute("book");
    List<FindBook> everybodyLikes = (List<FindBook>) request.getAttribute("everybodyLikes");
    String username = (String) request.getSession().getAttribute("username");
%>
<body>
<div class="box">
    <!-- 头部 -->
    <div id="header-container">
        <header id="header-compact-v3" class="pre-rendered-header should-stick">
            <div class="header-inner">
                <a href="#" title="豆瓣阅读" class="site-logo"></a>
                <nav class="func-nav">
                    <ul>
                        <li>
                            <button title="分类" class="nav-category fill-current-color">
                                <svg xmlns="http://www.w3.org/2000/svg" width="10" height="7" viewBox="0 0 10 7">
                                    <path fill="#a6a6a6"
                                          d="M0 0h10v.7H0zm0 2.1h10v.7H0zm0 2.1h10v.7H0zm0 2.1h10V7H0z"></path>
                                </svg><span class="text">分类</span>
                            </button>
                        </li>
                        <li>
                            <button title="搜索" class="nav-category fill-current-color">
                                <svg xmlns="http://www.w3.org/2000/svg" width="14" viewBox="0 0 14 14">
                                    <path fill="#a6a6a6"
                                          d="M14 12.83l-2.19-2.19a6.61 6.61 0 10-1.17 1.17L12.83 14zM2.5 10.7a5.8 5.8 0 018.2-8.2 5.8 5.8 0 01-8.2 8.2z"></path>
                                </svg><span class="text">搜索</span>
                            </button>
                        </li>
                    </ul>

                </nav>

                <div class="site-nav-container">
                    <!-- 第二个导航栏 -->
                    <nav class="site-nav site-nav-original">
                        <ul>
                            <li class="nav-item-original">
                                <a href="#" class="active">原创首页</a>
                            </li>
                            <li class="nav-item-original">
                                <a href="#" class="active">完本</a>
                            </li>
                            <li class="nav-item-original">
                                <a href="#" class="active">排行</a>
                            </li>
                            <li class="nav-item-original">
                                <a href="#" class="active">言情</a>
                            </li>
                            <li class="nav-item-original">
                                <a href="#" class="active">悬疑</a>
                            </li>
                            <li class="nav-item-original">
                                <a href="#" class="active">女性</a>
                            </li>
                            <li class="nav-item-original">
                                <a href="#" class="active">幻想</a>
                            </li>
                            <li class="nav-item-original">
                                <a href="#" class="active">同人</a>
                            </li>
                            <li class="nav-item-original">
                                <a href="#" class="active">文艺</a>
                            </li>
                            <li class="nav-item-original">
                                <a href="#" class="active">征文专区</a>
                            </li>
                            <li class="nav-item-original">
                                <a href="#" class="active">...</a>
                            </li>
                        </ul>
                    </nav>
                </div>
                <div id="nav-submit1" class="nav-submit">
                    <a href="#" class="lnk-start-publish fill-current-color">出版</a>
                </div>

                <div id="nav-submit2" class="nav-submit">
                    <a href="#" class="lnk-start-publish fill-current-color">会员</a>
                </div>

                <div id="nav-submit3" class="nav-submit">
                    <a href="#" class="lnk-start-publish fill-current-color">APP</a>
                </div>
                <div id="nav-submit" class="nav-submit">
                    <a href="transtition.jsp" class="lnk-start-publish fill-current-color">成为作者</a>
                </div>

                <nav class="site-nav-right">
                    <ul>
                        <li class="nav-bookshelf">
                            <a href="#" title="书架" aria-label="书架" class="require-login">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 24 24"
                                     class="fill-current-color">
                                    <path fill="#a6a6a6"
                                          d="M13.9 5.223l3.14 12.1a.23.23 0 00.284.165l2.332-.645a.233.233 0 00.162-.28l-3.14-12.1a.23.23 0 00-.284-.166l-2.332.645a.233.233 0 00-.162.28zM8.5 5h-3v12h3zm1 12h3V3h-3v14zm4-9.327V14.5h1.77zm0-3.57a1.212 1.212 0 01.293-.125l2.33-.645a1.232 1.232 0 011.516.86v.018l3.136 12.1a1.23 1.23 0 01-.863 1.5l-2.33.647a1.232 1.232 0 01-1.516-.86v-.018l-.537-2.08H13.5V17a1 1 0 01-1 1h-3a1 1 0 01-.5-.134 1 1 0 01-.5.134h-3a1 1 0 01-1-1v-1.5H1.822a.23.23 0 00-.23.227l-.074 5.04a.23.23 0 00.23.233h20.506a.23.23 0 00.228-.234l-.074-5.04a.23.23 0 00-.23-.226h-1.59l-.268-1h1.858a1.23 1.23 0 011.23 1.213l.074 5.038A1.23 1.23 0 0122.27 22H1.75a1.23 1.23 0 01-1.232-1.23v-.02l.074-5.037a1.23 1.23 0 011.23-1.213H4.5V5a1 1 0 011-1h3V3a1 1 0 011-1h3a1 1 0 011 1z"></path>
                                </svg>
                            </a>
                        </li>
                    </ul>
                </nav>

                <!-- 第四部分 -->
                <div class="user-info" id="user-info">
                    <div class="login-buttons">
                        <a href="#" data-size="sx" class="btn-contained login">
                            <span class="text">登录 / 注册</span>
                        </a>
                    </div>
                </div>
            </div>
        </header>
    </div>

    <!-- banTu -->
    <div class="Ban-Tu" style="background-image: url(${book.getBackground()})">
        <div class="new-Ban">
            <h1>${book.getBookName()}</h1>
            <div class="Tou">
                <div class="newt">
                    <img style="border-radius: 40px;" src="https://img3.doubanio.com/icon/up138652042-2.jpg" alt="">
                    <img style="border-radius: 10px;" class="icon-author-stamp" alt="">
                </div>
                <div class="name">
                    ${book.getAuthor()}
                </div>
                <div class="wen" style="font-size: 13px;">
                    ${book.getProfile()}
                </div>

                <div class="Tu">
                    <label><span style="font-size: 12px;"><img
                            src="https://static.arkread.com/ark/pics/common/profile/icon-contract-badge.1d1a4a23.svg"
                            alt="" style="margin-top:0">签约作品</span></label>
                    <label style="margin-left: 10px;"><span style="font-size: 12px;"><img
                            src="https://static.arkread.com/ark/pics/common/profile/icon-contract-badge.1d1a4a23.svg"
                            alt="" style="margin-top:0">已定价</span></label>
                </div>

                <div class="Tuu">
                    <!-- <span class="T">
                            </span> -->
                    <!-- <span>
                                暂无评价
                            </span> -->
                    <!-- <span class="newimg">
                            </span> -->
                </div>

                <div class="wuTu">
                        <span class="biaoqian"><img
                                src="https://static.arkread.com/ark/pics/common/profile/icon-contract-badge.1d1a4a23.svg"
                                alt=""></span>
                    <span class="Y">${book.getSignature2()}</span>
                    <span class="biaoqian"><img
                            src="https://static.arkread.com/ark/pics/common/profile/icon-contract-badge.1d1a4a23.svg"
                            alt=""></span>
                    <span class="Y">${book.getSignature3()}</span>
                    <span class="Y">${book.getSignature4()}</span>
                    <span class="Y">${book.getSignature5()}</span>
                </div>
                <div class="si">
                    <div class="FANG">
                        <div>
                            字数
                        </div>
                        <div style="font-weight: 700;">
                            ${String.valueOf(book.getWordage()).replaceAll("(?<=\\d)(?=(\\d{3})+$)", ",")}
                        </div>
                    </div>
                    <div class="FANG">
                        <div>
                            阅读
                        </div>
                        <div style="font-weight: 700;">
                            ${String.valueOf(book.getReadQuantity()).replaceAll("(?<=\\d)(?=(\\d{3})+$)", ",")}
                        </div>
                    </div>
                    <div class="FANG">
                        <div>
                            加入书架
                        </div>
                        <div style="font-weight: 700;">
                            ${String.valueOf(book.getAddQuantity()).replaceAll("(?<=\\d)(?=(\\d{3})+$)", ",")}
                        </div>
                    </div>
                    <div class="FANG">
                        <div>
                            推荐票
                        </div>
                        <div style="font-weight: 700;">
                            ${String.valueOf(book.getRecommendQuantity()).replaceAll("(?<=\\d)(?=(\\d{3})+$)", ",")}
                        </div>
                    </div>
                </div>
                <div>
                    <div class="jianjian">
                        <h4 id="mar">简介</h4>
                        <div style="margin-left: 10px;font-size:13px">
                            <%
                                String snopsis[] = book.getSnopsis().split("\n");

                            %>
                            <% for (String line : snopsis) { %>
                            <div><%= line %></div>
                            <% } %>

                        </div>
                    </div>
                    <div style="margin-top: 160px;"> </div>
                    <div style="margin-top: -5px;"></div>
                    <div class="mulu" style="margin-top: 30px;background:#eff2f3">
                        <div id="commentzise" style="font-weight: 700; margin-left:10px"></div>
                    </div>

                    <div class="pinglun" >
                        <div id="pingluns"></div>

                        <div style="text-align: center;margin:50px auto;">
                            <div id="pager" class="pager clearfix">
                            </div>
                        </div>
                        <div class="dou" style="padding-left: 10px;">大家都喜欢</div>

                        <div class="fflex">
                            <c:forEach var="likebook" items="${everybodyLikes}">

                                <div class="iiii">
                                    <div>
                                        <a href="/find/findBookDetail?bookId=${likebook.getId()}" class="cover">
                                            <img src="${likebook.getBookImage()}"
                                                              alt="" class="a">
                                        </a>
                                    </div>
                                    <div>
                                        <span>${likebook.getBookName()}</span>
                                    </div>
                                    <div style="margin-bottom: 50px;">
                                        <div style="font-size: 13px;color:#a6a6a6;">${likebook.getAuthor()}</div>
                                    </div>
                                </div>
                            </c:forEach>

                        </div>
                    </div>
                    <div class="didi row" style="margin-top: 600px;height:50px">
                        <div class="col-xs-2"></div>
                        <div class="newdi col-xs-10">
                            <div class="you">
                                <span></span>
                                <a class="con" onclick="checkSession(event)"><span><img src="/images/fenxiang-3.png" alt="">分享</span></a>
                            </div>
                            <div class="you">
                                <span></span>
                                <a class="con" data-toggle="modal" data-target="#myModal1" onclick="checkSession(event)"><span><img src="/images/liuyan.png" alt="">评论</span></a>
                            </div>
                            <div class="you">
                                <span></span>
                                <a class="con" data-toggle="modal" data-target="#myModal2" onclick="checkSession(event)"><span><img src="/images/toupiao.png" alt="">推荐票</span></a>
                            </div>
                            <div class="you">
                                <span></span>
                                <a class="con" onclick="addBook(event)"><span id="in"><img src="/images/tushu.png" alt=""><span id="text">加入书架</span></span></a>
                            </div>
                            <div>
                            <button class="btn" onclick="checkSession(event)">去阅读</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel1"><img src="/images/taolun.png" alt="">回复讨论</h4>
            </div>
            <div class="modal-body">

                    <textarea class="form-control" rows="3" placeholder="写点什么吧......" id="replyMessage"></textarea>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-success" data-dismiss="modal" id="submitReply">回复</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel2"><img src="/images/icon_pinglun.png" alt="">请输入您的评论</h4>
            </div>
            <div class="modal-body">
                    <textarea class="form-control" rows="3" placeholder="请输入您的评论" name="comment" id="inputComment"></textarea>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-success commentSubmit" data-dismiss="modal" id="comment">确定</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel3">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel3"><img src="/images/fapiao.png" alt="">推荐票</h4>
            </div>
            <div class="modal-body">
                <form role="form">
                    <div class="form-group">
                        <label for="im"><img src="/images/piaowuxitong.png" alt="" id="im">选择推荐票数</label>>
                            <select class="form-control" id="piao">
                                <option>1</option>
                                <option>2</option>
                                <option>3</option>
                                <option>4</option>
                                <option>5</option>
                            </select>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-success" data-dismiss="modal" id="submitPiao">确定</button>
            </div>
        </div>
    </div>
</div>



</div>
<script src="/fonts-materal/css/jquery.min.js"></script>
<script src="/js/bootstrap.js"></script>
<script src="/js/jquery.z-pager.js"></script>
<script src="https://unpkg.com/coco-message/coco-message.min.js"></script>
</body>
<script>
    cocoMessage.config({
        duration: 3000,
    });
    function checkSession(event){
        let currentClick = event.currentTarget;//获取到当前点击的a标签
        let username='<%=username%>';
        if(username==='null'){
            //获取并且移除data-target属性
            let targetData=currentClick.getAttribute('data-target');//便于恢复data-target属性
            currentClick.removeAttribute('data-target');
            cocoMessage.error("请先登陆！！！",2000);
            setTimeout(function () {
                window.location.href="http://localhost:8080/userLogin.jsp";
                currentClick.setAttribute('data-target',targetData);//2秒后，恢复data-target属性
            }, 2000);
        }

    }
    $(document).ready(function (){
        $.ajax({
            url: "http://localhost:8080/find/findBookCommentCount?bookId="+${book.getId()},
            method: "GET",
            success: function(response) {
                $("#commentzise").text("评论（"+response+"）")
                $("#pager").zPager({
                    totalData: response,
                    pageStep: 3,
                    htmlBox: $('#wraper'),
                    btnShow: true,
                    ajaxSetData: false
                });
            },
        })
    })
//给评论做个分页
  //将点击的当前点击的分页按钮的值带回后端做一个分页查询limit
  function currentPage(currentPage){
    console.log("当前页码数：" + currentPage);
    let timestamp=Date.now();
    console.log(timestamp);
    $.ajax({
        //限制一页显示的个数为4
      url: "http://localhost:8080/find/findBookCommentPage?pageSize=3&pageNum="+currentPage+"&currentTime="+timestamp+"&bookId="+${book.getId()},
      method: "GET",
      success: function(response) {
        $("#pingluns").empty()
        for(let comment of response){
          console.log(comment)
          $("#pingluns").append(`<div class="inner" id="`+comment.id+`">
              <div><img src="`+comment.userAvatar+`" alt="" style="width: 40px;height: 40px;margin-top: 20px"></div>
          <div >
            <h3 id="top1">`+comment.nickName+`</h3>
            <div>
              <span>`+comment.result+`</span>
              <span>添加批注</span>
            </div>
            <div class="bai">
              `+comment.comment+`
              <div>
                  <!-- <a href="#" style="color: rgb(92, 92, 230);">展开上下文</a> -->
              </div>
            </div>
            <div style="display: flex; margin-top: 20px;">
              <div class="zan">
                <button type="button" style="width:80px; height:30px;border:none;border-radius:5px;" id="hover" onclick="addPraise(event)">赞`+comment.praise+`</button>
              </div>
              <div class="zans">
                <button type="button" data-toggle="modal" data-target="#myModal" style="width: 80px;
                                                    height: 30px; border: none;  border-radius:5px;" id="hover1" onclick="getCommentId(event)">回复`+comment.reply+`
                </button>
              </div>
             <div style="width:50px" class="inner1">
                <button style="margin-left:10px;height:30px;border:none;background:#f6f8f8;color:#333">...</button>
                <div class="rc-trigger actions-menu-container" style="position:absolute;left:1076px;margin-top:0">
                    <div class="action-menu">
                        <a href="/comment/getReplyByCommentId?commendId=`+comment.id+`">`+`<button class>查看所有回复</button></a>
                     </div>
                </div>
              </div>
          </div>
        </div>`)
        }
      }
    });
  }
  //评论
  $('#comment').on('click',function (){
      let timestamp=Date.now();
      console.log(timestamp);
      let bookId="${book.getId()}";
      let username='<%=username%>';
      console.log(username);
      let commentText=$('#inputComment').val();//获取到输入的评论
          $.ajax({
              type:"POST",
              url:"/comment/add",
              data:{username:username,bookId:bookId,commentText:commentText,timestamp:timestamp},
              success:function (){
                  cocoMessage.success('评论成功',2000);
                  setTimeout(function () {
                      window.location.href=window.location.href;
                  }, 2000);
              },
              error:function (error){
              }
          })
  })
    //推荐票
    $('#submitPiao').on('click',function (){
        let recommendPiao=$('#piao').val();
        let bookId="${book.getId()}";
        let username='<%=username%>';
            $.ajax({
                type:"POST",
                url:"/comment/updatepiao",
                data:{bookId:bookId,recommendPiao:recommendPiao,username:username},
                success:function (){
                    cocoMessage.success('评价成功');
                },
                error:function (error){
                    console.log(error);
                }
            })
    })
    //加入书架
   function addBook(event){
        var dataRequest={
            bookId:"${book.getId()}",
            username:'<%=username%>',
            bookImage:"${book.getBookImage()}",
            bookAuthor:"${book.getAuthor()}",
            bookName:"${book.getBookName()}",
            addTime:Date.now()
        };
        let element=document.getElementById('text');
            $.ajax({
                type:"POST",
                url:"/bookshelf/add",
                contentType: 'application/json',
                data:JSON.stringify(dataRequest),
                success:function (data){
                    if(data===0){
                        cocoMessage.error('已在书架');
                    }else{
                        cocoMessage.success('成功加入书架');
                    }
                    element.innerText='已在书架';
                    element.style.color='#999';
                },
                error:function (error){
                    console.log(error);
                }
            })
   }
   //点赞
 function addPraise(event){
        //获取当前点击的评论的id
        let target=event.currentTarget;
        let comment=target.parentNode.parentNode.parentNode.parentNode;
        let commentId=comment.id;
        console.log(commentId);
        let text=target.textContent;
        console.log(text);
        //使用正则提取字符串中的数字串
        let numberString=text.match(/\d+/);
        console.log(numberString);
        let number=parseInt(numberString,10)+1;
        console.log(number);
        console.log(typeof (number));
        let newPraise="赞"+number;
        target.textContent=newPraise;
        $.ajax({
            type:"POST",
            url:"/praise/add",
            data:{number:number,commentId:commentId},//评论数目，评论的id
            success:function (){
                cocoMessage.success('点赞成功');
            },
            error:function (error){
                console.log(error);
            }
        })
 }
 //回复
     let commentId
    function getCommentId(event){
        let innerId=event.currentTarget.closest('.inner');
        commentId=innerId.id;
    }
    $('#submitReply').on('click',function (){
        let elementReply=document.getElementById('hover1');
        let content=elementReply.innerText;
        let numberString=content.match(/\d+/);
        let number=parseInt(numberString,10)+1;
        let newReply="回复"+number;
        elementReply.innerText=newReply;
        let currentDate = new Date();
        let year = currentDate.getFullYear();
        let month = ('0' + (currentDate.getMonth() + 1)).slice(-2);
        let day = ('0' + currentDate.getDate()).slice(-2);
        let timeStamp=year+"-"+month+"-"+day;
        var requestData={
            remarkId:commentId,
            bookId:"${book.getId()}",
            username:'<%=username%>',
            replyText:$('#replyMessage').val(),
            replyTime:timeStamp
        };
        $.ajax({
            type:"POST",
            url:"/comment/insertReply",
            contentType: 'application/json',
            data:JSON.stringify(requestData),
            success:function (){
                cocoMessage.success('回复成功');
            },
            error:function (error){
                console.log(error);
            }
        })
    })
    $(document).ready(function (){
        let username='<%=username%>';
        console.log(username);
        if (username==='null') {//当前尚未登录
            console.log('success2');
            $('#user-info').empty();
            $('#user-info').append('<div class="login-buttons">'+'<a href="userLogin.jsp" data-size="sx" class="btn-contained login">'+
                '<span class="text">登录 / 注册</span></a> </div>')
        }else{//已经登陆.带着登陆信息到后端加载用户头像
            console.log('success1');
            $.ajax({
                type:"GET",
                url:"/load/Image",
                data:{username:username},
                success:function (data) {
                    $('#user-info').empty();
                    $('#nav-submit').empty();
                    for(var i=0;i<data.length;i++) {
                        $('#user-info').append('<div class="nav-user more-active">' +
                            '<a href="#" class="avatar">' +
                            '<img src="'+data[i].userAvatar+'" alt="">'+
                            '</a>' +
                            '<div class="drop-down-list">' +
                            '<a href="/myIndex/message?username='+username+'">' +
                            '<span class="text">个人主页</span>' +
                            '</a>' +
                            '<a href="#">' +
                            '<span class="text">退出登陆</span>' +
                            '</a>' +
                            '</div>' +
                            '</div>')
                        if(data[i].identify===-1){//不是作者
                            $('#nav-submit').append(` <a href="transtition.jsp" class="lnk-start-publish fill-current-color">成为作者</a>`)
                        }else{
                            $('#nav-submit').append(` <a href="authorIndex.jsp" class="lnk-start-publish fill-current-color">作者空间</a>`)
                        }

                    }
                },
                error:function (error){
                    console.log(error);
                }
            })
        }
    })
</script>
</html>
